<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react</title>
    <style>
      .title {
        color: pink;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
      // 1. class -> className
      // const element = <h1 className="title">Hello React</h1>;

      const style = {
        color: "pink",
        // "font-size": "30px", // style属性建议写成小驼峰
        fontSize: 30, // 单位如果是px，可以省略不写
        backgroundColor: "black",
      };

      // 2. style -> 行内样式
      // 不支持原生DOM的行内样式写法
      // const element = <h1 style="color: pink; font-size: 30px">Hello React</h1>;

      // 行内样式必须写成对象形式
      // const element = <h1 style={style}>Hello React</h1>;
      const element = (
        <h1
          style={{
            color: "pink",
            // "font-size": "30px", // style属性建议写成小驼峰
            fontSize: 30, // 单位如果是px，可以省略不写
            backgroundColor: "black",
          }}
        >
          Hello React
        </h1>
      );

      ReactDOM.createRoot(document.getElementById("root")).render(element);
    </script>
  </body>
</html>
